<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>我的订单</title>
    <link rel="shortcut icon" type="image/x-icon" th:href= "@{/static/img/timg.jpg}">
    <link rel="stylesheet" href="../../static/bootstrap-3.3.7-dist/css/bootstrap.css">
    <link rel="stylesheet" th:href="@{/static/css/TandC.css}">
    <link rel="stylesheet" th:href="@{/static/css/shoppingCart.css}">
    <link rel="stylesheet" th:href="@{/static/css/brandSpike.css}">
    <link rel="stylesheet" th:href="@{/static/css/myOrder.css}">

</head>
<body>
<!--顶部+搜索+侧边-->
<div th:include="like/likeHead :: common"></div>

<!--页面内容-->
<div class="or-body">
    <div class="or-body-content">
<!--        <div class="or-body-left">-->
<!--            <div class="or-body-left-top"><b>订单中心</b></div>-->
<!--            <ul>-->
<!--                <li>我的订单</li>-->
<!--            </ul>-->
<!--            <div class="or-body-left-top or-body-left-top2"><b>订单中心</b></div>-->
<!--            <ul>-->
<!--                <li>关注的商品</li>-->
<!--                <li>关注的店铺</li>-->
<!--            </ul>-->
<!--        </div>-->

        <!--        左边标题栏-->
        <div class="my-left">
            <dl class="my-dl">
                <dt class="my-dt">个人中心</dt>
                <dd class="my-dd"><a href="/user/myVault">我的金库</a></dd>
            </dl>
            <dl class="my-dl">
                <dt class="my-dt">购物中心</dt>
                <dd class="my-dd"><a th:href="@{/user/shoppingTrolley}">购物车</a></dd>
                <dd class="my-dd"><a th:href="@{/user/myOrder}">我的订单</a></dd>
                <dd class="my-dd"><a th:href="@{/user/willMyOrder}">已收货商品</a></dd>
            </dl>
            <dl class="my-dl" style="margin-bottom: 0;">
                <dt class="my-dt">账户安全</dt>
                <dd class="my-dd"><a href="/user/myVault">基本信息</a></dd>
            </dl>
        </div>



        <div class="or-body-right">
<!--            <div class="or-body-right-head"><div>我的订单</div></div>-->
            <div class="or-body-right-content">
                <div class="or-content">
                    <div class="or-content-top">
                        <ul id="s-user-hide-ul">
                            <li class="s-hide-active">我的订单</li>
                            <li class="my-end"><a th:href="@{/user/willMyOrder}">已完成订单</a></li>
                        </ul>
                    </div>
                    <div class="or-content-remark">
                        <ul>
                            <li class="or-content-remark1">商品</li>
                            <li class="or-content-remark2">支付状态</li>
                            <li class="or-content-remark3">购买数量</li>
                            <li class="or-content-remark4">金额</li>
                            <li class="or-content-remark5">查看</li>
                        </ul>
                    </div>
                    <ul class="s-user-hide-ul" id="s-hide-content" th:if="${orderAll!=null}">
                        <li class="s-content" th:each="orderDate:${orderAll}" >
                            <div class="or-content-goods">
                                <div class="or-content-goods-top" >
                                    <div class="or-content-goods-top1" th:text="'编号：'+${orderDate.getOrderId()}"></div>
                                    <div class="or-content-goods-top1">订单号： <a href="javascript:;" th:text="${orderDate.getConsignTime()}"></a></div>
                                    <div class="or-content-goods-top1" th:text="'订单创建时间：'+${orderDate.getCreateTime()}"></div>
                                    <div class="or-content-goods-top1" th:if="${!orderDate.getStatus()}" style="cursor: pointer;"><a th:href="@{'/user/endOrder?id='+${orderDate.getOrderId()}}">删除</a></div>
                                    <div class="or-content-content">
                                        <div class="or-goods-left"><img th:src="@{'./../static/img/'+${orderDate.getPicPath()}}"></div>
                                        <div class="or-goods-instruction">
                                            <a href="javascript:;" th:text="${orderDate.getShippingName()}"></a><br><br>
                                            <a href="javascript:;" th:if="${orderDate.getStatus()}" th:text="'收货地址：'+${orderDate.getBuyerMessage()}"></a>
                                            <a href="javascript:;" th:if="${!orderDate.getStatus()}"></a>
                                        </div>
                                        <div class="or-good-status"th:if="${orderDate.getStatus()}" >已支付</div>
                                        <div class="or-good-status"th:if="${!orderDate.getStatus()}">未支付</div>
                                        <div class="or-goods-user" th:text="'×'+${orderDate.getNum()}"></div>
                                        <div class="or-goods-money">
                                            <span th:text="'总额：￥'+${orderDate.getPrice()}"></span><br>
                                            <div class="or-goods-string"></div>
                                            <span>在线支付</span>
                                        </div>
                                        <div class="or-goods-buy">
                                            <div class="or-buy-one" data-toggle="modal" data-target="#myModal"
                                                 th:data-orderid="${orderDate.getOrderId()}"
                                                 th:data-consigntime="${orderDate.getConsignTime()}"
                                                 th:data-number="${orderDate.getNum()}"
                                                 th:data-price="${orderDate.getPrice()}"
                                                 th:data-status="${orderDate.getStatus()}"
                                                 th:data-phone="${orderDate.getBuyerNick()}"
                                                 th:data-buyermessage="${orderDate.getBuyerMessage()}"
                                            >查看商品</div>

                                            <div th:if="${orderDate.getStatus()}" class="or-buy-one"><a th:href="@{'/user/endOrder?id='+${orderDate.getOrderId()}}">收货</a></div>
                                            <div th:if="${!orderDate.getStatus()}" class="or-buy-one"><a th:href="@{'http://localhost:8080/user/finishOrder?orderId='+${orderDate.getOrderId()}}">立即支付</a></div>
                                        </div>

                                    </div>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>



</div>
<!-- 查看商品模态框（Modal） -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                    &times;
                </button>
                <h4 class="modal-title" id="myModalLabel">
                    查看商品
                </h4>
            </div>
            <div class="modal-body">
                <div class="modal-in">编号：<span class="orderId no"></span></div>
                <div class="modal-in">订单号：<span class="consignTime no"></span></div>
                <div class="modal-in">手机号：<span class="phone no"></span></div>
                <div class="modal-in">支付状态：<span class="status no"></span></div>
                <div class="modal-in">数量：<span class="number"></span></div>
                <div class="modal-in">金额：<span class="price"></span></div>
                <div class="modal-in">收货地址：<span class="buyerMessage no"></span></div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-sm order-btn" data-dismiss="modal">确定</button>
            </div>
        </div>
    </div>
</div>
<!--以上为查看商品模态框-->
</body>
<script th:src="@{/static/js/jquery-3.3.1.min.js}"></script>
<script th:src="@{/static/js/bootstrap.min.js}"></script>
<script th:src="@{../../static/js/likeFooter.js}"></script>
<script th:src="@{/static/js/index.js}"></script>
<script th:src="@{/static/js/myOrder.js}"></script>
</html>